<template>
  <div id="customer-service-template">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item">
          <router-link to="/admin/customerServiceTemplates"
            >服务费模板信息</router-link
          >
        </li>
      </ol>
    </nav>

    <div class="row">
      <div class="col-12">
        <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="group-info-tab"
              data-bs-toggle="tab"
              href="#templateInfo"
              >模板信息</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="login-tab"
              data-bs-toggle="tab"
              href="#customerInfo"
              >客户与模板</a
            >
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="templateInfo">
            <div class="card">
              <div class="card-body">
                <form class="row">
                  <div class="col">
                    <button
                      type="button"
                      class="btn btn-primary"
                      @click.stop="search()"
                    >
                      查找
                    </button>

                    <a
                      href="javascript:void(0)"
                      class="btn btn-success float-end"
                      @click="newGroup()"
                      >新建</a
                    >
                  </div>
                </form>
              </div>
              <div class="card-body bg-light">
                注意：<span class="text-danger"
                  >模板信息不能删除，模板代码不能修改。</span
                >
              </div>
              <table class="table table-striped table-hover table-sm">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>模板代码</th>
                    <th>模板名称</th>
                    <th>价格模式</th>
                    <th>出票服务费</th>
                    <th>保险金额</th>
                    <th>退票服务费</th>
                    <th>改签服务费</th>
                    <th>服务费报表显示</th>
                    <th>GP票模式</th>
                    <th>规则强度</th>
                    <th>生成时间</th>
                    <th>修改时间</th>
                    <th></th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="(info, index) in dataList" :key="info.id">
                    <td>{{ info.id }}</td>
                    <td>{{ info.templateCode }}</td>
                    <td>{{ info.templateName }}</td>
                    <td>
                      <span v-if="info.flightPriceMode === 0">
                        黑屏公布运价
                      </span>
                      <span v-else-if="info.flightPriceMode === 1">
                        大客户优先票价
                      </span>
                      <span v-else-if="info.flightPriceMode === 2">
                        底价(代理费全返)
                      </span>
                    </td>
                    <td>{{ info.flightTicketingFee }}</td>
                    <td>{{ info.flightInsurance }}</td>
                    <td>{{ info.flightRefundFee }}</td>
                    <td>{{ info.flightChangeFee }}</td>
                    <td>
                      <span v-if="info.reportShowFee === 0">合并</span>
                      <span v-else>单列</span>
                    </td>
                    <td>
                      <span v-if="info.gpMode === 0">不可开</span>
                      <span v-if="info.gpMode === 1">可开</span>
                      <span v-if="info.gpMode === 2">仅开</span>
                    </td>
                    <td>
                      <span v-if="info.strength === 0">弱</span>
                      <span v-if="info.strength === 10">强</span>
                    </td>
                    <td>{{ info.createTime }}</td>
                    <td>{{ info.lastUpdate }}</td>
                    <td>
                      <button class="btn btn-sm" @click.stop="edit(index)">
                        修改
                      </button>
                    </td>
                    <td>
                      <router-link
                        :to="`/admin/customerServiceTemplate/` + info.id"
                        >详情</router-link
                      >
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="tab-pane fade show" id="customerInfo">
            <customer-service-template-customer
              :templates="dataList"
            ></customer-service-template-customer>
          </div>
        </div>
      </div>
    </div>
    <my-modal-customer-service-template ref="customerServiceTemplateModal">
    </my-modal-customer-service-template>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import $ from "jquery";
import {
  searchCustomerServiceTemplates,
  saveCustomerServiceTemplate,
} from "@/api/admin";
import CustomerServiceTemplateCustomer from "./customer-service-template-customer.vue";
import MyModalCustomerServiceTemplate from "@/components/modal/my-modal-customer-service-template.vue";

export default {
  components: {
    CustomerServiceTemplateCustomer,
    MyModalCustomerServiceTemplate,
  },
  data() {
    return {
      id: 0,
      code: "",
      name: "",
      flightPriceMode: 0,
      flightTicketingFee: 0,
      flightInsurance: 0,
      flightRefundFee: 0,
      flightChangeFee: 0,
      reportShowFee: 0,
      gpMode: 0,
      strength: 0,

      dataList: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      this.showLoading();

      searchCustomerServiceTemplates(
        (v) => {
          this.dataList = v.dataList;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    reset: function () {
      this.id = 0;
      this.name = "";
      this.code = "";
    },
    newGroup: function () {
      const params = {
        id: 0,
        name: "",
        code: "",
        flightPriceMode: 0,
        flightTicketingFee: 0,
        flightInsurance: 0,
        flightRefundFee: 0,
        flightChangeFee: 0,
        reportShowFee: 0,
        gpMode: 0,
        strength: 0,
      };

      this.$refs.customerServiceTemplateModal
        .modal(params)
        .then((v) => {
          this.save(v);
        })
        .catch((ex) => {});
    },
    edit: function (index) {
      const info = this.dataList[index];

      const params = {
        id: info.id,
        name: info.templateName,
        code: info.templateCode,
        flightPriceMode: info.flightPriceMode,
        flightTicketingFee: info.flightTicketingFee,
        flightInsurance: info.flightInsurance,
        flightRefundFee: info.flightRefundFee,
        flightChangeFee: info.flightChangeFee,
        reportShowFee: info.reportShowFee,
        gpMode: info.gpMode,
        strength: info.strength,
      };

      this.$refs.customerServiceTemplateModal
        .modal(params)
        .then((v) => {
          this.save(v);
        })
        .catch((ex) => {});
    },
    save: function (v) {
      const params = {
        id: v.id,
        name: v.name,
        code: v.code,
        flightPriceMode: v.flightPriceMode,
        flightTicketingFee: v.flightTicketingFee,
        flightInsurance: v.flightInsurance,
        flightRefundFee: v.flightRefundFee,
        flightChangeFee: v.flightChangeFee,
        reportShowFee: v.reportShowFee,
        gpMode: v.gpMode,
        strength: v.strength,
      };
      saveCustomerServiceTemplate(
        params,
        (v) => {
          if (v.status === "OK") {
            $("#modalNew").modal("hide");
            this.search();
          } else {
            this.showErrMsg("失败：" + v.errmsg, "danger");
          }
        },
        (f) => {
          this.showErrMsg(f.statusText, "danger");
        }
      );
    },
  },
};
</script>
